<template>
  <div class="aside-container">
    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" text-color="#fff" active-text-color="#409eff"
      background-color="#2e3f53" :collapse="userStore.isCollapse" unique-opened router>
      <!-- 一级菜单  首页 -->
      <el-menu-item index="/index">
        <i class="iconfont homepage"></i>
        <span>首页</span>
      </el-menu-item>
      <!-- 其他 一级菜单 -->
      <el-sub-menu :index="item.name" v-for="item in userStore.getMenuRoutes" :key="item.id">
        <template #title>
          <i class="iconfont" :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <!-- 二级菜单 -->
        <template v-for="el in item.children" :key="el.id">
          <el-menu-item :index="'/' + item.name + '/' + el.name" v-if="el.hidden == 0">
            <i class="iconfont" :class="el.icon"></i>
            <span>{{ el.title }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/userStore';
const userStore = useUserStore();

// 接收 父组件传过来的 defaultActive
// 给props设置默认值: withDefaults(props,默认值)
withDefaults(defineProps<{
  defaultActive: string
}>(), {
  // 当父组件没有传 defaultActive时  使用这里的默认值
  defaultActive: '/index'
})

</script>

<style scoped lang="less">
.aside-container {
  color: #fff;

  .el-menu {
    border-right: 0;
  }

  .el-menu-vertical-demo {
    height: calc(100vh - 70px);
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    // 这里的 :not 代表的是 在没有.el-menu--collapse这个类名时,以下属性才失效
    width: 200px;
    min-height: calc(100vh - 70px);
  }
}
</style>